<template>
  <div class="notebook">
    <div class="notebook-nav">
      <span class="notebook-title">☆ 重磅推荐 ☆</span>
    </div>
    <!-- 笔记本  商品 图片 价格 详情 -->
    <div class="notebook-detail" v-for="item in noteData.splice(0,2)" :key="item.id" style="margin:10px;">
      <van-image 
        width="363px"
        height="226px"
        fit="contain"
        :src="item.image_url" 
        />
        <van-cell-group>
          <van-cell :title="item.zh_name" :label="item.description">
            <template #default>
             <span>￥{{ getPrice(item.price) }} 起</span>
             <br>
             <van-button type="danger" size="mini">立即购买</van-button>
            </template>
          </van-cell>
        </van-cell-group> 
    </div>

    <div class="notebook-nav">
      <span class="notebook-title">☆ 年度品牌 ☆</span>
    </div>
    <!-- 手机 -->
    <div class="phone-pr">
      <van-cell-group v-for="item in phoneData.splice(0,2)" :key="item.id">
        <van-cell>
          <template #default>
            <van-image :src="item.image_url"  />
            <div class="phone-detail">
              <span style="color:#666;">{{ item.zh_name }}</span>
              <span style="color:red;">￥{{ getPrice(item.price) }} 起</span>
              <van-button type="danger" size="mini">立即购买</van-button>
            </div>
          </template>
        </van-cell>
    </van-cell-group> 
    </div>
    
    <div class="notebook-nav" style="margin:10px;">
      <span class="notebook-title">☆ 今典热卖 ☆</span>
    </div>
    <div class="notebook-nav" style="margin:10px;">
      <span class="notebook-title">☆ 其他好玩 ☆</span>
    </div>

    <div class="play_note">
      <p>人群购机指南</p>
      <div style="border: 3px solid rgb(66, 134, 191);"></div>
        <van-grid :column-num="2">
          <van-grid-item v-for="value in 6" :key="value">
              <template #default>
              <van-image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d1ffaea355ab590ee88a48c9ab1ef0f.jpg?f=webp" />
            </template>
          </van-grid-item>
        </van-grid>
      <div style="border: 7px solid rgb(66, 134, 191);"></div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted } from 'vue'
import {getAllCategories } from '@/api/category' // 接口

// 笔记本数据 
const noteData = ref([]) 
// 手机数据
const phoneData = ref([])

// 加载数据
onMounted(async () => {
  // 根据id 
  const res = await getAllCategories()
  noteData.value = res.data[3].products
  phoneData.value = res.data[0].products
    
  console.log('手机数据', phoneData.value);
})
  // 去小数点
  const getPrice = (value) => {
    return parseFloat(value).toFixed(0)
  }
</script>

<style lang="scss" scoped>
.notebook{
  background-color: rgb(72, 120, 166);
  width: 100%;
  .notebook-nav{
    background-color: rgb(66, 134, 191);
    height: 42px;
    line-height: 42px;
    text-align: center;
    .notebook-title{
    color:#fff;
    font-size: 20px;
  }
  }
  .notebook-detail{
    background-color: rgb(230, 241, 243);
    .van-cell-group{
      ::v-deep .van-cell__value{
          color:red;
          }
      }
  }
  .phone-pr{
    margin-top: 10px;
    display: flex;
    justify-content:space-around;
    .van-cell{
      padding: 0;
      margin: 0;
      .van-cell__value{
        
        .van-image{
          width: 160px;
          height: 126px;
        }
      }
    }
    .phone-detail{
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      align-items: center;
      font-size: 14px;
      .van-button{
        width: 100px;
        height: 20px;
      }
    }
  }
  .play_note{
    height: auto;
    background-color: #fff;
    margin-bottom: 70px;
    font-size: 20px;
    .van-grid-item{
      ::v-deep .van-grid-item__content{
        padding: 0;
      }
    }
    p{
      line-height: 40px;
      text-align: center;
      padding: 0;
      margin: 0;
    }
  }
}

</style>